import React, { useCallback, useState } from 'react'
import Taro from '@tarojs/taro'
import { Swiper, SwiperItem, View, Text, Image } from '@tarojs/components'
import Images from '@ASSET/Images'
import ModuleTitle from '@COMPONENTS/ModuleTitle'
import Navigate from '@NAVIGATION/navigateManager'
import { Analytic_Type } from '@CONSTANTS/analytic'
import { LanguageType } from '@INTERFACES/Common'
import { SurveyITF } from '@INTERFACES/Survey'
import { DECISION_TYPE } from '@CONSTANTS/decision'
import { getPlatform } from '@UTILS/common'
import style from './HomeTemplates.module.scss'

const { isWeb } = getPlatform()

interface Props {
  data: SurveyITF[];
}

const HomeTemplates: React.FC<Props> = ({
  data
}) => {
  const language = 'zh'
  const [idx, setIdx] = useState<number>(0)
  const onClickMore = useCallback(() => {
    Navigate.decisionList()
    Taro.tracker.trackEvent(Analytic_Type.num_home_test.eventId)
  }, [])
  const onClickItem = useCallback(dId => {
    if (isWeb) return
    Taro.tracker.trackEvent(Analytic_Type.tap_expert_sur_detail.eventId, { p8Id: dId })
    Navigate.decisionFlowIndex({ dId, type: DECISION_TYPE.Survey })
  }, [])
  const onChangeIdx = useCallback(e => {
    const { detail: { current } } = e
    setIdx(current)
  }, [])
  const onWebClick = useCallback(() => {
    if (!isWeb) return
    const p8Id = data?.[idx]?.p8Id
    if (!p8Id) return
    Taro.tracker.trackEvent(Analytic_Type.tap_expert_sur_detail.eventId, { p8Id })
    Navigate.decisionFlowIndex({ dId: p8Id, type: DECISION_TYPE.Survey })
  }, [data, idx])
  if (!Array.isArray(data) || data.length < 1) return null
  const isOne = data.length === 1
  const dots = new Array(data.length).fill(0)
  return (
    <View className={style.container}>
      <ModuleTitle
        title="疼痛自测"
        subTitle="专业疼痛评估"
        showMore
        onClickMore={onClickMore}
        containerClass={style.containerClass}
      />
      <View onClick={onWebClick}>
        <Swiper
          className={style.swiperView}
          indicatorColor="#ECECEC"
          indicatorActiveColor="#47C690"
          onChange={onChangeIdx}
          circular
          indicatorDots={false}
          autoplay={!isOne}
          interval={3000}
        >
          {
          data.map((item, index) => (
            <SwiperItem key={`template_${index}`}>
              <RenderItem
                onClick={onClickItem}
                language={language}
                data={item}
              />
            </SwiperItem>
          ))
        }
        </Swiper>
      </View>

      {!isOne && (
        <View className={style.dotView}>
          {dots.map((i, index) => (
            <View key={`dots_${index}`} className={`${style.dot} ${index === idx ? style.active : ''}`} />
          ))}
        </View>
      )}
    </View>
  )
}

interface ItemProps {
  onClick: (dId: string) => void;
  language: LanguageType;
  data: SurveyITF;
}

const RenderItem: React.FC<ItemProps> = ({
  data, language, onClick
}) => {
  const {
    p8Id, TitlePatient, Title, ParticipantNumber,
  } = data
  const onClickCard = useCallback(() => {
    onClick?.(p8Id)
  }, [onClick, p8Id])
  const title = TitlePatient?.[language] || Title?.[language] || ''
  return (
    <View className={style.containerItem} onClick={onClickCard}>
      <Image src={Images.expert.pain_test} className={style.coverImage} />
      <View className={style.contentItem}>
        <View className={style.titleBox}><Text className={style.itemTitle}>{title}</Text></View>
        <View className={style.itemBox}><Text className={style.itemNumber}>{`${ParticipantNumber} 人已测`}</Text></View>
      </View>
    </View>
  )
}

export default HomeTemplates
